import React, { Dispatch, SetStateAction, useState } from 'react'
import { Space, Table, Tag, Button } from 'antd';
import type { ColumnsType } from 'antd/es/table';
// 导入数据类型
import { adminlistItemType } from '@/types'

type Props = {
    adminlist: Array<adminlistItemType>,
    showDrawer: () => void,
    setIsShowAddBtn: Dispatch<SetStateAction<boolean>>,
    setDrawerTitleFn: Dispatch<SetStateAction<string>>,
    setAdminNameFn: Dispatch<SetStateAction<string>>,
    setPasswordFn: Dispatch<SetStateAction<string>>,
    setRoleFn: Dispatch<SetStateAction<number>>,
    setCheckedKeys: Dispatch<SetStateAction<Array<string>>>,
    deluserFn: (m: { adminid: string }) => void
}

export default function Apptable({ adminlist,
    showDrawer,
    setIsShowAddBtn,
    setDrawerTitleFn,
    setAdminNameFn,
    setPasswordFn,
    setRoleFn,
    setCheckedKeys,
    deluserFn

}: Props) {
    // 设置是当前页数
    const [currentPage, setCurrenPageFn] = useState(1);
    // 设置每页条数
    const [pageSize, setPageSize] = useState(2);

    const columns: ColumnsType<adminlistItemType> = [
        {
            title: '序号',
            dataIndex: 'index',
            key: 'index',
            render: (text, record, index) => <a>{(currentPage - 1) * pageSize + index + 1}</a>,
            align: 'center'
        },
        {
            title: '姓名',
            dataIndex: 'adminname',
            key: 'adminname',
            align: 'center'
        },
        {
            title: '权限',
            dataIndex: 'role',
            key: 'role',
            align: 'center',
            render: (text, record, index) => {
                if (text == 1) {
                    return <Tag color='green'>管理员</Tag>
                }
                if (text == 2) {
                    return <Tag color='blue'>超级管理员</Tag>
                }
                if (text != 2 && text != 1) {
                    return <Tag color='red'>其他</Tag>
                }
            }
        },
        {
            title: '操作',
            key: 'action',
            align: 'center',
            render: (text, record, index) => (
                <Space size="middle">
                    <Button type='primary' onClick={() => {
                        // 01: 显示抽屉
                        showDrawer()
                        //02: 显示编辑确认按钮
                        setIsShowAddBtn(false)
                        //03: 标题设置编辑用户标题
                        setDrawerTitleFn('编辑用户')
                        // 04: 进行数据的回填
                        // console.log('record', record);
                        setAdminNameFn(record.adminname)
                        setPasswordFn(record.password)
                        setRoleFn(record.role)
                        setCheckedKeys(record.checkedKeys)

                    }}>编辑</Button>
                    <Button color='danger' onClick={() => {
                        deluserFn({ adminid: record.adminid })
                    }}>删除</Button>
                </Space>
            ),
        },
    ];

    return (
        <Table
            columns={columns}
            dataSource={adminlist}
            rowKey={(record) => record.adminid}
            pagination={{
                position: ['bottomRight'],
                current: currentPage,
                pageSize: pageSize,
                pageSizeOptions: [2, 4, 6, 8],
                showQuickJumper: true,
                showTotal: (total) => `共${adminlist.length}条`,
                total: adminlist.length,
                onChange(page, pageSize) {
                    // console.log(page, pageSize);
                    setCurrenPageFn(page)
                    setPageSize(pageSize)
                }
            }}
        />
    )
}